<template>
  <view>
    <view class="d-flex d-flex-around bg-fff  d-flex-middle px-2">
      <view v-for="(item,index) in newsList" class="pt-2 pb-2" :key=index+1 @click="tabsIndex = item.id">
        <text :class="{'grabClassActive':tabsIndex == item.id}" class="font30 main-color">{{ item.name }}</text>
      </view>
    </view>

    <view class="mt-1">
      <view
          v-for="(newsItem, index) in newsContentList"
          :key="newsItem.id"
          class="bg-fff mb-2 p-2 color-92"
          @click="goUrl('/subPages/newsDetails/newsDetails')"
      >
        <view class="py-1 font30">{{ newsItem.title }}</view>
        <view class="text-clamp-two font26">
          {{ newsItem.content }}
        </view>
        <view class="d-flex d-flex-between py-1">
          <text></text>
          <text class="font20">发布人：{{ newsItem.author }} {{ newsItem.publishTime }}</text>
        </view>
        <image
            class="news-image rounded10"
            mode="aspectFit"
            :src="newsItem.imageUrl"
        ></image>
        <view class="d-flex d-flex-around pt-2">
          <view class="d-flex d-flex-middle">
            <text class="iconfont icon-yanjing1 font40"></text>
            <text class="ml-1 font20">{{ newsItem.readCount }}</text>
          </view>
          <view class="d-flex d-flex-middle">
            <text class="iconfont icon-Gc_115_line-Star"></text>
            <text class="ml-1 font20">{{ newsItem.starCount }}</text>
          </view>
          <view class="d-flex d-flex-middle">
            <text class="iconfont icon-xiaoxi font38"></text>
            <text class="ml-1 font20">{{ newsItem.commentCount }}</text>
          </view>
          <view class="d-flex d-flex-middle">
            <text class="iconfont icon-dianzan font34"></text>
            <text class="ml-1 font20">{{ newsItem.likeCount }}</text>
          </view>
        </view>
      </view>


    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      tabsIndex: 0, // 当前选中的标签索引
      newsList: [   // 新闻一级分类列表
        {id: 0, name: '推荐'},
        {id: 1, name: '热点'},
        {id: 2, name: '科技'},
        {id: 3, name: '财经'},
        {id: 4, name: '娱乐'}
      ],
      newsContentList: [
        {
          id: 1,
          title: '标题标题标题标题1',
          content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容1...',
          author: '小编',
          publishTime: '2022-06-21 13:00',
          imageUrl: 'https://cdn.lubanschool.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230801133413-20230801133755.png',
          readCount: 1234,
          likeCount: 1234,
          commentCount: 1234,
          starCount: 1234
        },
        {
          id: 2,
          title: '标题标题标题标题2',
          content: '内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容2...',
          author: '小编',
          publishTime: '2022-06-21 14:00',
          imageUrl: 'https://cdn.lubanschool.cn/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230801133413-20230801133755.png',
          readCount: 2345,
          likeCount: 2345,
          commentCount: 2345,
          starCount: 2345
        }
      ]
    }
  },
  methods: {
    goUrl(urlPages, data) {
      // if (!this.loginState) {
      //   uni.showToast({
      //     title: '未登录，请先登录！',
      //     icon: 'none'
      //   })
      //   setTimeout(() => {
      //     uni.navigateTo({
      //       url: '/subPages/login/login'
      //     })
      //   }, 1500)
      // } else {
      uni.navigateTo({
        url: urlPages
      })
      // }
    }
  }
}
</script>

<style scoped>
.color-92 {
  color: rgba(92, 92, 92, 1);
}

.text-clamp-two {
  line-height: 1.6; /* 调整行高使2行高度固定 */
  height: calc(1.6em * 2); /* 固定2行高度 */
}

.news-image {
  height: 228rpx;
  width: 100%;
  display: block;
  margin: 0 auto;
  background-color: rgba(204, 204, 204, 1);
}
</style>
